<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../html/reset.css">
    <style>
        .box {
            width: 1000px;
            /* background-color: pink; */
            margin: 0 auto;
            text-align: center;
        }

        h2 {
            padding: 10px 0;
        }

        .div1 {
            display: flex;
            flex-flow: column nowrap;
            margin: 20px 0;
        }

        .div2 {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
        }

        section {
            width: 100px;
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 0 10px;
        }

        .active {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box">

        <div class="div1">
            <p>time</p>
            <div class="btn">
                <button class="start">开始</button>
                <button class="end">结束</button>
            </div>
            <h2>第一组</h2>
            <div class="div2">
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
            </div>
        </div>
        <div class="div1">

            <h2>第二组</h2>
            <div class="div2">
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
            </div>
        </div>
        <div class="div1">

            <h2>第三组</h2>
            <div class="div2">
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
            </div>
        </div>
        <div class="div1">

            <h2>第四组</h2>
            <div class="div2">
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
            </div>
        </div>
        <div class="div1">

            <h2>第五组</h2>
            <div class="div2">
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
                <section>李晓</section>
            </div>
        </div>
    </div>

    <script>
        const start = document.querySelector('.start')
        const end = document.querySelector('.end')
        const p = document.querySelector('p')
        let sets = null
        let son = null
        let stimes = 10
        let tesin = stimes



        const section = document.querySelectorAll('section')

        function cetln() {
            section.forEach(tiem => { tiem.classList.remove('active') });
        }

        let sanchulei = function () {
            let radow = Math.floor(Math.random() * section.length)
            cetln()
            section[radow].classList.add('active')
            son = setTimeout(sanchulei(), 100)
        }

        let shijiandao = function () {
            sets = setInterval(() => {
                p.innerText = tesin--
                if (tesin < 0) {
                    p.innerText = '时间到！'
                    clearInterval(sets);
                }
                sanchulei()
            }, 1000)
        }

        start.addEventListener('click', () => {
            shijiandao()
            sanchulei()
        })

        end.addEventListener('click', () => {
            clearInterval(sets)
            clearTimeout(son)
            tesin = stimes
            p.innerText = tesin
            sets = null
            son = null
        })





    </script>
</body>

</html>